<template>
  <div class="PersonalPage">
    <div class="head">
      <useHeadContent
        :data="arr"
        :id="pageId"
        :totalLikes="totalLikes"
        :totalComments="totalComments"
        :totalWorks="totalWorks"
        :totalCommentCount="totalCommentCount"
      />
    </div>
    <div class="main">
      <useMainTab
        :id="pageId"
        :data="arr"
        :status="typeTab"
        v-model:searchName="inputVal"
        @statusChange="statusChange"
        @onChangeIpt="onChangeIpt"
      />
      <useShowCompile
        :status="typeTab"
        :data="arr"
        :showModal="showModal"
        @onAddCompile="onAddCompile"
        @onDelCompile="onDelCompile"
        @addList="addList"
      />
      <div class="back">
        <div class="backList">
          <useMainContent
            v-for="item in filteredItems"
            :key="item.id"
            :data="item"
            :userData="arr"
            :id="pageId"
            :status="typeTab"
            @onLike="onLike"
            v-model:commentVal="item.comment"
            @onComment="onComment"
            @onSend="onSend"
            @onDelItem="onDelItem"
            @clearTrack="clearTrack"
            @changeAudio="changeAudio"
            @suspend="suspend"
            @shares="shares"
          />
        </div>
      </div>
    </div>
    <useModal
      :isVisible="showModal"
      @update:isVisible="showModal = $event"
      @option-selected="handleOptionSelected"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive, watch } from "vue";
import useHeadContent from "@/components/PersonalPage/useHeadContent.vue";
import useMainTab from "@/components/PersonalPage/useMainTab.vue";
import useShowCompile from "@/components/PersonalPage/useShowCompile.vue";
import useMainContent from "@/components/PersonalPage/useMainContent.vue";
import useModal from "@/components/PersonalPage/useModal.vue";
import audios from "@/assets/audio/11.mp3";
import { useRoute } from "vue-router";
const route = useRoute();
const pageId = route.params.id;
console.log("pageId: ", pageId);
// 个人信息
const arr = ref(
  //   {
  //   id: 1,
  //   // 学生个人
  //   studentName: "赵夏秋",
  //   // 班级管理
  //   className: {
  //     id: 0,
  //     name: "花园一班",
  //   },
  //   teacher: [
  //     {
  //       id: 0,
  //       name: "赵夏秋老师",
  //     },
  //     {
  //       id: 1,
  //       name: "赵紫潼",
  //     },
  //   ],
  //   classMembers: [
  //     {
  //       id: 0,
  //       name: "赵夏秋",
  //     },
  //     {
  //       id: 1,
  //       name: "学生二",
  //     },
  //     {
  //       id: 2,
  //       name: "学生三",
  //     },
  //     {
  //       id: 3,
  //       name: "学生四",
  //     },
  //     {
  //       id: 4,
  //       name: "学生五",
  //     },
  //     {
  //       id: 5,
  //       name: "学生六",
  //     },
  //     {
  //       id: 6,
  //       name: "学生七",
  //     },
  //     {
  //       id: 7,
  //       name: "学生八",
  //     },
  //     {
  //       id: 8,
  //       name: "学生九",
  //     },
  //     {
  //       id: 9,
  //       name: "学生十",
  //     },
  //     {
  //       id: 10,
  //       name: "学生十一",
  //     },
  //     {
  //       id: 11,
  //       name: "学生十二",
  //     },
  //     {
  //       id: 12,
  //       name: "学生十三",
  //     },
  //     {
  //       id: 13,
  //       name: "学生十四",
  //     },
  //     {
  //       id: 14,
  //       name: "学生十五",
  //     },
  //     {
  //       id: 15,
  //       name: "学生十六",
  //     },
  //     {
  //       id: 16,
  //       name: "学生十七",
  //     },
  //     {
  //       id: 17,
  //       name: "学生十八",
  //     },
  //     {
  //       id: 18,
  //       name: "学生十九",
  //     },
  //     {
  //       id: 19,
  //       name: "学生二十",
  //     },
  //     {
  //       id: 20,
  //       name: "学生二十一",
  //     },
  //     {
  //       id: 21,
  //       name: "学生二十二",
  //     },
  //     {
  //       id: 22,
  //       name: "学生二十三",
  //     },
  //     {
  //       id: 23,
  //       name: "学生二十四",
  //     },
  //     {
  //       id: 24,
  //       name: "学生二十五",
  //     },
  //     {
  //       id: 25,
  //       name: "学生二十六",
  //     },
  //     {
  //       id: 26,
  //       name: "学生二十七",
  //     },
  //     {
  //       id: 27,
  //       name: "学生二十八",
  //     },
  //     {
  //       id: 28,
  //       name: "学生二十九",
  //     },
  //     {
  //       id: 29,
  //       name: "学生三十",
  //     },
  //   ],
  //   // 教师个人
  //   teacherName: "赵夏秋老师",
  //   chargeClass: [
  //     {
  //       id: 0,
  //       name: "花园一班",
  //     },
  //     {
  //       id: 1,
  //       name: "花园二班",
  //     },
  //     {
  //       id: 2,
  //       name: "花园三班",
  //     },
  //   ],
  //   // 管理员名字
  //   adminName: "管理员",
  //   // 角色
  //   // role: [0],
  //   // role: [1],
  //   role: [2],
  // },
  
  // 这个是管理员
  // {
  //   id: 1,
  //   // 学生个人
  //   name: "藤茵茵",
  //   nickName:"一藤老师",
  //   school:"藤养学园",
  //   role: [0],
  //   // 所属类目
  //   compile: [
  //     {
  //       id: 1,
  //       title: "作业一",
  //     },
  //     {
  //       id: 2,
  //       title: "作业二",
  //     },
  //     {
  //       id: 3,
  //       title: "作业三",
  //     },
  //     {
  //       id: 4,
  //       title: "作业四",
  //     },
  //     {
  //       id: 5,
  //       title: "作业五",
  //     },
  //     {
  //       id: 6,
  //       title: "作业六",
  //     },
  //     {
  //       id: 7,
  //       title: "作业七",
  //     },
  //     {
  //       id: 8,
  //       title: "作业八",
  //     },
  //     {
  //       id: 9,
  //       title: "作业九",
  //     },
  //     {
  //       id: 10,
  //       title: "作业十",
  //     },
  //     {
  //       id: 11,
  //       title: "作业十一",
  //     },
  //     {
  //       id: 12,
  //       title: "作业十二",
  //     },
  //   ],
  // }

  // 这个是老师权限
  {
    id: 1,
    // 学生个人
    name: "藤茵茵",
    nickName:"一藤老师",
    // 班级管理
    chargeClass: [
      {
        id: 0,
        name: "花园一班",
      },
      {
        id: 1,
        name: "花园二班",
      },
      {
        id: 2,
        name: "花园三班",
      },
    ],
    school:"藤养学园",
    subject: '',
    phone: 15131595530,
    role: [1],
    // 所属类目
    compile: [
      {
        id: 1,
        title: "作业一",
      },
      {
        id: 2,
        title: "作业二",
      },
      {
        id: 3,
        title: "作业三",
      },
      {
        id: 4,
        title: "作业四",
      },
      {
        id: 5,
        title: "作业五",
      },
      {
        id: 6,
        title: "作业六",
      },
      {
        id: 7,
        title: "作业七",
      },
      {
        id: 8,
        title: "作业八",
      },
      {
        id: 9,
        title: "作业九",
      },
      {
        id: 10,
        title: "作业十",
      },
      {
        id: 11,
        title: "作业十一",
      },
      {
        id: 12,
        title: "作业十二",
      },
    ],
  }

  //  这个是学生
  // {
  //   id: 1,
  //   // 学生个人
  //   name: "藤茵茵",
  //   // 班级管理
  //   className: {
  //     id: 0,
  //     name: "花园一班",
  //   },
  //   educationID: 7527,
  //   phone: 15131595530,
  //   role: [2],
  //   // 所属类目
  //   compile: [
  //     {
  //       id: 1,
  //       title: "作业一",
  //     },
  //     {
  //       id: 2,
  //       title: "作业二",
  //     },
  //     {
  //       id: 3,
  //       title: "作业三",
  //     },
  //     {
  //       id: 4,
  //       title: "作业四",
  //     },
  //     {
  //       id: 5,
  //       title: "作业五",
  //     },
  //     {
  //       id: 6,
  //       title: "作业六",
  //     },
  //     {
  //       id: 7,
  //       title: "作业七",
  //     },
  //     {
  //       id: 8,
  //       title: "作业八",
  //     },
  //     {
  //       id: 9,
  //       title: "作业九",
  //     },
  //     {
  //       id: 10,
  //       title: "作业十",
  //     },
  //     {
  //       id: 11,
  //       title: "作业十一",
  //     },
  //     {
  //       id: 12,
  //       title: "作业十二",
  //     },
  //   ],
  // }
);
// 评论的信息
const list = ref([
  {
    id: 0,     // 作品id
    type: 1,   //作品所在区域
    userId: 1,  //作者id
    UserShareId: 1,  //分享用户的id
    title: "花园宝宝",   
    author: "林东东",
    time: "2024-08-13 18:00",  //创建时间
    shareTime: "2024-08-13 18:00",  //分享时间
    like: 20,         //点赞数
    commentShow: false,     //评论状态
    comment: "",           //评论内容
    audioStatus: false,     //音频状态
    audio: audios,          //音频  
    share: 0,                //分享数
    list: [  //评论数据
      {
        id: 0,
        userId: 0,
        title: "路人甲",
        scoring: 5,
        comment: "爱听",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "无敌",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 1,
    type: 2,
    userId: 1,
    UserShareId: 1,
    title: "小星星",
    author: "赵夏秋",
    time: "2024-08-13 18:00",
    like: 2110,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    share: 0,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 2,
    type: 0,
    userId: 1,
    UserShareId: 1,
    title: "熊出没",
    author: "张玉坤",
    time: "2024-08-13 18:00",
    like: 21,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    share: 0,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 3,
    type: 3,
    userId: 1,
    UserShareId: 1,
    title: "花园宝宝",
    author: "林东东",
    time: "2024-08-13 18:00",
    like: 20,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    share: 0,
    list: [
      {
        id: 0,
        userId: 0,
        title: "路人甲",
        scoring: 5,
        comment: "爱听",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "无敌",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 4,
    type: 4,
    userId: 1,
    UserShareId: 1,
    title: "小星星",
    author: "赵夏秋",
    time: "2024-08-13 18:00",
    like: 2110,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    share: 0,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 5,
    type: 0,
    userId: 1,
    UserShareId: 1,
    title: "熊出没",
    author: "张玉坤",
    time: "2024-08-13 18:00",
    like: 21,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    share: 0,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 6,
    type: 1,
    userId: 1,
    UserShareId: 1,
    title: "花园宝宝",
    author: "林东东",
    time: "2024-08-13 18:00",
    like: 20,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    share: 0,
    list: [
      {
        id: 0,
        userId: 0,
        title: "路人甲",
        scoring: 5,
        comment: "爱听",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "无敌",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 7,
    type: 2,
    userId: 1,
    UserShareId: 1,
    title: "小星星",
    author: "赵夏秋",
    time: "2024-08-13 18:00",
    like: 2110,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    share: 0,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 8,
    type: 3,
    userId: 1,
    UserShareId: 1,
    title: "熊出没",
    author: "张玉坤",
    time: "2024-08-13 18:00",
    like: 21,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    share: 0,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 9,
    type: 0,
    userId: 1,
    UserShareId: 1,
    title: "熊出没",
    author: "张玉坤",
    time: "2024-08-13 18:00",
    like: 21,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    share: 0,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
]);
// 编辑区内容

// 搜索 tab切换
const typeTab = ref(0);
const inputVal = ref("");
const statusChange = (data) => {
  console.log("data: ", data);
  typeTab.value = data;
  console.log("typeTab.value: ", typeTab.value);
};
const onChangeIpt = (data) => {
  inputVal.value = data;
};
// 计算属性：过滤后的项目
const filteredItems = computed(() => {
  // return list.value.filter((item) => item.title.includes(inputVal.value));
  return list.value.filter(
    (item) => item.title.includes(inputVal.value) && item.type === typeTab.value
  );
});
// 点赞
const onLike = (done) => {
  console.log("done: ", done);
  console.log(list.value);
};
// 评论
const onComment = (id) => {
  list.value[id].commentShow = !list.value[id].commentShow;
};
// 发送
const onSend = (obj) => {
  console.log("obj: ", obj);
  console.log("list.value: ", list.value[obj.pid]);
  if (arr.value.role[0] !== 2) {
    list.value[obj.pid].list.unshift(obj);
  }
};
// 删除评论
const onDelItem = (obj) => {
  list.value[obj.pid].list = list.value[obj.pid].list.filter(
    (item) => item.id !== obj.id
  );
};
// 编辑类目的添加
const onAddCompile = (obj) => {
  if (arr.value.id == obj.userId) {
    console.log(111);
    arr.value.compile.push(obj);
  }
};
// 删除类目
const onDelCompile = (obj) => {
  console.log("obj: ", obj);
  if (arr.value.id == obj.userId) {
    console.log(111);
    arr.value.compile = arr.value.compile.filter((item) => item.id !== obj.id);
  }
};
// 删除音乐
const clearTrack = (id) => {
  console.log(id);
  list.value.forEach((item, index) => {
    if (item.id === id) {
      list.value.splice(index, 1);
    }
  });
};
// 添加乐谱
const showModal = ref(false);
const addList = (done) => {
  console.log("done: ", done);
  showModal.value = done;
  console.log("showModal.value: ", showModal.value);
};
const handleOptionSelected = (option) => {
  console.log("option: ", option);
};
// 切换音乐
const currentAudio = ref(null);
const changeAudio = (obj) => {
  list.value.forEach((item, index) => {
    if (item.id === obj.id) {
      // 当前音频的状态保持不变
      list.value[index].audioStatus = obj.audioStatus;
    } else {
      // 对于其他音频
      if (item.audioStatus) {
        // 如果音频正在播放，需要保持其状态
        if (currentAudio.value && currentAudio.value.id === item.id) {
          // 当前播放的音频，不做处理
          return;
        }
      }
      // 停止并重置未播放的音频
      list.value[index].audioStatus = false; // 设置状态为停止
    }
  });
};
// 切换播放/暂停状态
const suspend = (obj) => {
  list.value.forEach((item, index) => {
    if (item.id === obj.id) {
      // 当前音频的状态保持不变
      list.value[index].audioStatus = obj.audioStatus;
    }
  });
};

// console.log("Total comment count in sub-lists:", totalCommentCount);
onMounted(() => {
  const userData = JSON.stringify(arr.value);
  localStorage.setItem("userdata", userData);
});

// 初始化点赞和评论数
//点赞
const totalLikes = ref(0);
// 评论
const totalComments = ref(0);
// 初始化作品数
const totalWorks = ref(0);
//分享
// share:0,
const totalCommentCount = ref(0);
const shares = (id) => {
  list.value.forEach((item, index) => {
    if (item.id === id) {
      list.value[index].share++;
    }
  });
};
function updateStats() {
  totalLikes.value = list.value.reduce((acc, item) => acc + item.like, 0);
  totalComments.value = list.value.reduce(
    (acc, item) => acc + item.list.length,
    0
  );
  //作品数量
  totalWorks.value = list.value.length;
  //分享
  totalCommentCount.value = list.value.reduce(
    (acc, item) => acc + item.share,
    0
  );
}
updateStats();
watch(
  () => list.value,
  (newList, oldList) => {
    console.log("newList", newList);
    console.log("oldList", oldList);
    updateStats();
    shares();
  },
  {
    deep: true,
    immediate: true,
  }
);
watch(
  () => typeTab.value,
  (newList, oldList) => {
    console.log("oldList: ", oldList);
    console.log("newList: ", newList);
    console.log("typeTab.value: ", typeTab.value);
    if (oldList != newList) {
      list.value.forEach((item, index) => {
        // 对于其他音频
        if (item.audioStatus) {
          // 如果音频正在播放，需要保持其状态
          if (currentAudio.value && currentAudio.value.id === item.id) {
            // 当前播放的音频，不做处理
            return;
          }
        }
        // 停止并重置未播放的音频
        list.value[index].audioStatus = false; // 设置状态为停止
      });
    }
  }
);
onMounted(() => {
  totalCommentCount.value = 0;
});
</script>
<style scoped lang="scss">
.PersonalPage {
  width: 100%;
  height: 86vh;
  // padding: 20px;
  overflow: hidden;

  .main {
    margin-top: 20px;
    width: 100%;
    background-color: white;
    padding: 20px;

    .back {
      height: 86vh;
      margin-top: 20px;
      overflow: hidden;

      .backList {
        height: 100%;
        overflow-y: auto;

        .content:last-child {
          margin-bottom: 220px;
        }
      }

      .backList:last-child {
        padding-bottom: 220px;
      }
    }
  }

  .backList::-webkit-scrollbar {
    width: 0px;
    /* 隐藏滚动条 */
  }

  .backList {
    scrollbar-width: none;
    /* Firefox 隐藏滚动条 */
  }

  .backList {
    -ms-overflow-style: none;
    /* IE 和 Edge 隐藏滚动条 */
  }
}
</style>
